<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/person.css"/>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<title></title>
		<style type="text/css">
		a{
			color: black;
			font-size: 20px;
		}
		#login_img{
			text-align: center;
			margin-left: 100%;
			margin-top: 60%;
			width: 120px;
			height: 110px;
			margin-bottom: 20px;
			border-radius: 20px;
		}
		</style>
	</head>
	<body>
		<div id="app">
			<van-icon name="arrow-left" color="white" size="36px" style="float: left;position: absolute;z-index: 2;top: 5px;"
			 @click="back">
			</van-icon>
			<van-row>
				 <van-col>
				 	<img src="../../img/login.PNG" id="login_img" />
				 </van-col>
			</van-row>
			<van-row>
				 <van-col span="22"offset="1" style="margin-bottom: 10px;">
					<van-field
						v-model="phone"
					    placeholder="请输入手机号"
					    left-icon="phone-o"
						label="|"
						v-bind:error-message=error_message
						@blur="Checkphone"
					>
					</van-field>
				</van-col>
				<van-col span="22"offset="1">
					<van-field
					v-model="password"
					type="password"
					label="|"
					placeholder="请输入密码"
					left-icon="gem-o"
				>
				</van-field>
				</van-col>
			</van-row>
			<van-row style="margin:20px 0px 10px 0px;">
				<van-col span="16" offset="4">
					<van-button size="large" round type="info" @click="login">立即登录</van-button>
				</van-col>
			</van-row>
			<van-row>
				<van-col offset="18">
					<a href="#" @click="Resetpwd" style="font-size: 17px; color: blue;">忘记密码？</a>
				</van-col>
			</van-row>
			<van-row style="margin-top: 150px;">
				<van-col offset="7">
					<a href="#" @click="register" style="font-size: 17px; color: gray;">没有账号？<span style="color: blue;">立即注册</span></a>
				</van-col>
				<van-col offset="3" style="margin-top: 20px;">
					<div style="font-size: 14px;color: gray;">我已阅读并同意<a href="#" style="font-size: 14px;">《用户协议》</a>与<a href="#" style="font-size: 14px;">《隐私政策》</a></div>
				</van-col>
			</van-row>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					phone:"",
					password:"",
					error_message:"",
				},
				mounted() {
					plus.key.addEventListener("backbutton",function(){  
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					});
					 plus.webview.getWebviewById("Shopping").reload(true);
					 plus.webview.getWebviewById("Person").reload(true);
				},
				methods:{
					back: function() {
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					},
					Checkphone:function(){
						var _this=this;
						if(!(/^1[34578]\d{9}$/.test(_this.phone))){
							_this.error_message="请输入正确的手机号";
						}
						else{
							_this.error_message="";
						}
					},
					Resetpwd:function(){
						var Resetpwd=plus.webview.create("../Person-views/Resetpwd.html","Resetpwd");
						plus.webview.show("Resetpwd");
					},
					register:function(){
						var regitser=plus.webview.create("../Person-views/register.html","register");
						plus.webview.show("register");
					},
					login:function(){
						var _this=this;
						_this.$toast.loading({
							duration: 2000,       // 持续展示 toast
							forbidClick: true, // 禁用背景点击
							loadingType: 'spinner',
							mask:true,
							message: '登陆中'
						});
						ajax({
							url:"http://dsapi.ysd3g.com/api/login",
							dataType:"JSONP",
							data:{
								account:_this.phone,
								password:_this.password
							},	
							success:function(res){
								if(res.Error==true){
									app.$toast.fail(res.Msg);
									setTimeout(function(){
										_this.$toast.clear();
									},1000);
								}
								else{
									localStorage.setItem("keys",res.Key);
									// console.log(res);
									var img=res.UserData.AvatarImage;
									localStorage.setItem("imgUrl",img);
									var person=plus.webview.getWebviewById("Person");
									person.reload(true);//刷新个人页面
									plus.webview.getWebviewById("Shopping").reload(true);//刷新购物车页面
 									var name=res.UserData.NickName;
									localStorage.setItem("name",name);	
									if(plus.webview.getWebviewById("Goodsdetail")){
										plus.webview.getWebviewById("Goodsdetail").reload(true);
									}
									localStorage.setItem("phone",res.UserData.Phone); 
									setTimeout(function(){
										_this.$toast.success("欢迎您,"+localStorage.getItem("name"));
										setTimeout(function(){
											_this.$toast.clear();
											plus.webview.close("login");
										},1000);
									},2000)
								}
							}
						});
					}
				}
			});
		</script>
	</body>

</html>